import { useEffect } from "react";
import { useRoutes, useLocation, useNavigate } from "react-router-dom";
import router from "./route";
// 增加全局loading
import { Spin } from "antd";
import { useSelector, useDispatch } from "react-redux";

function GoLogin() {
  const navigator = useNavigate();
  useEffect(() => {
    navigator("/login");
  });
  return <div></div>;
}
function GoHome() {
  const navigator = useNavigate();
  // useEffect 类似与vue 的生命周期函数
  useEffect(() => {
    navigator("/page1");
  });
  return <div></div>;
}
function BeferRouter() {
  const outlet = useRoutes(router);
  /**
   * 判断两种情况
   * 1：有token跳转到登录页-》应该直接跳转到首页
   * 2：没有token跳转到非登录页-》跳转到登录页
   * 3：其他情况正常走流程
   */
  const route = useLocation();
  const token = "112"; //这里的token按理说是需要登录后将token保存在redux和本地locationStorage中的数据，取locationStorage中的
  if (token && route.pathname === "/login") {
    return <GoHome></GoHome>;
  } else if (!token && route.pathname !== "/login") {
    return <GoLogin></GoLogin>;
  } else {
    return <>{outlet}</>;
  }
}

function App() {
  // return <>{outlet}</>;
  const { loading } = useSelector((state) => ({
    loading: state.Loading.loading,
  }));
  return (
    <div className="app">
      <Spin spinning={loading} wrapperClassName={"center-loading"}>
        <BeferRouter />
      </Spin>
    </div>
  );
}

export default App;
